<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/css/formSelects-v4.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/formSelects-v4.min.js}" charset="utf-8"></script>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-form-item">
                            <label for="ptype" class="layui-form-label">借阅人名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="readerName" placeholder="请输入借阅人名称" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <label for="ptype" class="layui-form-label">图书名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="bookName" placeholder="请输入图书名称" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <label for="ptype" class="layui-form-label">借阅状态</label>
                            <div class="layui-input-inline">
                                <select class="layui-select" id="ptype" name="borrowStatus" xm-select="ptype"
                                        xm-select-radio="">
                                    <option value=-1>所有</option>
                                    <option value=0>未借阅</option>
                                    <option value=1>已借阅</option>
                                    <option value=2>已归还</option>
                                </select>
                            </div>
                            <label for="ptype" class="layui-form-label">起止时间</label>
                            <div class="layui-inline" id="test">
                                <div class="layui-input-inline">
                                    <input type="text" name="start" class="layui-input" id="start"
                                           placeholder="请输入开始日期">
                                </div>
                                <div class="layui-form-mid">到</div>
                                <div class="layui-input-inline">
                                    <input type="text" name="end" class="layui-input" id="end"
                                           placeholder="请输入结束日期">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="search_btn">
                                        <i class="layui-icon">&#xe615;</i>提交
                                    </button>
                                </div>

                                <div class="layui-btn layui-btn-small" style="float:right"
                                     onclick="reload();" title="刷新">
                                    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>刷新
                                </div>
                            </div>


                        </div>

                    </form>
                </div>

                <div class="layui-card-body ">
                    <table id="bookList" lay-filter="bookList"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/html" id="bookListBar">
    {{# if(d.statusIntroduce == '暂无借阅'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="borrow">借阅</a>
    {{# }if(d.statusIntroduce == '已归还'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="borrow">借阅</a>
    {{# }if(d.statusIntroduce == '已借阅'){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="return">归还</a>
    {{#  } }}
</script>

<script type="text/javascript" th:inline="javascript">

    layui.use(['form', 'layer', 'table', 'laydate'], function () {

        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            table = layui.table;
        laydate.render({
            elem: '#start',
            type: 'datetime',
            done: function(value, date, end){
                // 当选择日期后，动态设置结束日期的最小日期限制
                laydate.render({
                    elem: '#end',
                    type: 'datetime',
                    trigger: 'click',
                    format: 'yyyy-MM-dd',
                    min: value // 这里的value就是开始日期选择器的值
                });
            }  //这里选择日期类型，也可以选择datetime
        });

        var tableIns = table.render({
            elem: '#bookList',
            url: '/admin/book/listall',
            method: 'get',
            title: '部门列表',
            page: true,  //开启分页
            height: "full-110",  //高度最大化减去差值110,高度将始终铺满
            toolbar: true,  //仅开启工具栏，不显示左侧模板
            limit: 10,  //每页显示的条数
            limits: [5, 10, 20, 30],  //每页条数的选择项
            cols:
                [
                    [
                        {type: 'checkbox', field: 'bookId', fixed: "left"},
                        {field: 'bookId', title: '图书编号', align: 'center', unresize: "true"},
                        {field: 'bookName', title: '图书名称', align: "center", unresize: "true"},
                        {field: 'borrowTime', title: '借阅时间', align: 'center', unresize: "true"},
                        {field: 'returnTime', title: '归还时间', align: 'center', unresize: "true"},
                        {field: 'borrowName', title: '借阅人', align: 'center', unresize: "true"},
                        {field: 'statusIntroduce', title: '借阅状态', align: 'center', unresize: "true"},
                        {title: '操作', align: "center", unresize: "true", toolbar: "#bookListBar"}
                    ]
                ]
        });

        //搜索
        form.on('submit(search_btn)', function (data) {
            tableIns.reload({
                url: '/admin/book/listbykeys',
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //监听工具条
        table.on('tool(bookList)', function (obj) {
            var data = obj.data, //获得当前行数据
                layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            switch (layEvent) {
                case 'borrow':
                    xadmin.open('借阅图书', '/admin/book/borrowBook?bookId=' + data.bookId, 450, 300);
                    break;
                case 'return':
                    layer.confirm('确定归还此书籍？', {icon: 3, title: '提示信息'}, function (index) {
                        $.post("/admin/book/returnBook",
                            {
                                "bookId": data.bookId
                            }, function (s) {
                                layer.msg(s.msg);
                            });
                        layer.close(index);
                        tableIns.reload();
                        window.location.reload();
                    });
                    break;
                default:
                    break;
            }
        });

    });


    function reload() {
        window.location.reload();
    }
</script>
</body>
</html>